<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue@3.5.21/dist/vue.global.js"></script>

    <style>

      
    </style>
</head>
<body>
    <div id="app">
       
           <button  v-on:click="btnClick">点我1</button>   <br>
           <button  @click="btnClick">点我2</button><br>

           <!-- 事件修饰符  -->
           <button  @click.once="btnClick">点我3</button><br>

           <!-- $event 表示事件独享，类似于原生的 window.event -->
            <input type="text" @keydown="keyDown($event)"> <br>


                <a href="http://www.baidu.com" @click="clickHref1($event)">点我跳转1</a><br>


                <!-- 事件修饰符  @click.prevent   -->
                <a href="http://www.baidu.com" @click.prevent="clickHref2()">点我跳转2</a><br>

    </div>

    <script>
      let app =  Vue.createApp({
            data(){
                return {
                    
                    colorValue:'red',
                    bgColor:'skyblue'

                }
            },
            methods:{
                btnClick(){
                    console.log(this);
                    console.log(app);
                    
                    console.log("按钮被点击了");
                    
                },
                keyDown(event){
                    console.log(event);
                },
                clickHref1(event){
                    event.preventDefault();
                    console.log("超链接被点击");
                },

                clickHref2(){
                    
                    console.log("超链接被点击");
                }



            }
       }).mount("#app")
    </script>
</body>
</html>